<template>
  <div class="wrapper">
    <el-descriptions title="" size="medium" :colon="false" :column="1" labelClassName='label'
      contentClassName="content">
      <el-descriptions-item label="账号类型">员工</el-descriptions-item>
      <el-descriptions-item label="账号">
        {{ ruleForm.user }}
      </el-descriptions-item>
      <el-descriptions-item label="姓名">{{ ruleForm.name }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ ['男', '女'][this.ruleForm.gender] }}</el-descriptions-item>
      <el-descriptions-item label="所属组织">{{ ruleForm.branch_name }}</el-descriptions-item>

      <el-descriptions-item label="联系方式">{{ ruleForm.mobile }}</el-descriptions-item>
      <el-descriptions-item label="身份证">{{ ruleForm.id_card }}</el-descriptions-item>
      <el-descriptions-item label="角色">
        <el-tag style="margin-right:10px" size="small" v-for="(item, index) in ruleForm.role_name" :key="index">{{
          item.role
        }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="职位">{{ ruleForm.position }} </el-descriptions-item>
      <el-descriptions-item label="状态">{{ ['启用', '关闭'][this.ruleForm.status] }}</el-descriptions-item>

    </el-descriptions>
  </div>
</template>

<script>
import {
  queryStaff,
} from "@/api/organization";
export default {
  name: 'staff',
  components: {},
  props: ['id'],
  data() {
    return {
      ruleForm: {}
    };
  },
  mounted() {
    queryStaff({ id: this.id * 1 }).then(res => {
      this.ruleForm = res.data;
    });
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.wrapper {
  /deep/.label {
    width: 75px;
    color: rgba(78, 89, 105, 1);
    font-size: 14px;
  }

  /deep/.content {
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
  }
}
</style>